<template>
  <div class="HomeIndex">
    <div class="home-entry">
      <el-row style="padding: 0;">
        <el-col :span="12" style="padding: 0;">
          <div class="grid-content bg-purple">
            <el-button @click="$router.push('/shopping')" style="background: #3cb56c; color: #fff;height: 80px;">我要买车 </el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-dropdown trigger="click">
              <el-button style="background: #97cf15; color: #fff;height: 80px;">
                我要卖车<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/offerforsale')">平台回收</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/usersale')">个人自卖</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="newCart">
      <div class="catList">
        <span class="h3">最新发布</span>
        <span @click="getCart('自营')">自营车</span>
        |
        <span @click="getCart('豪华')">豪华车</span>
        |
        <span @click="getCart('练手')">练手车</span>
        |
        <span @click="getCart('suv')">suv</span>
      </div>
      <ul ref="pannel" class="goods-list">
        <li v-for="item in newData" :key="item.id">
          <el-card class="box-card">
            <router-link :to="{ path: '/goods', query: { id: item.id, typeCode: item.car.typeCode } }">
              <img :src="'http://www.yocar.website:8080/yoche/img/' + item.car.photo[0]" alt="" />
              <p class="name">{{ item.car.brand }}</p>
              <p>{{ item.car.card_time | data }}年 | {{ item.car.displacement }}</p>
              <p class="price">&yen;{{ item.car.price }}万元</p>
            </router-link>
          </el-card>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="proceedings">
      <div class="heard">
        <h3>交易流程</h3>

        <el-button class="button" style="background: #3cb56c; color: #fff" @click="lic=true">买车 </el-button>
        <el-button class="button" style="background: #97cf15; color: #fff" @click="lic=false"> 卖车 </el-button>
      </div>

      <div v-if="lic" class="lic" style="text-align: right; margin: 0">
        <el-steps align-center :active="5">
          <el-step title="卖家一手车"></el-step>
          <el-step title="联系车主"></el-step>
          <el-step title="专人带看"></el-step>
          <el-step title="平台复检"></el-step>
          <el-step title="安享质保"></el-step>
        </el-steps>

        <el-steps align-center :active="5" style="margin-top: 40px">
          <el-step title="平台自营车"></el-step>
          <el-step title="一键预约看车"></el-step>
          <el-step title="专人带看"></el-step>
          <el-step title="平台复检"></el-step>
          <el-step title="安享质保"></el-step>
        </el-steps>
      </div>

      <div v-else class="lic" style="text-align: right; margin: 0">
        <el-steps align-center :active="5">
          <el-step title="个人自卖"></el-step>
          <el-step title="一键发布卖车"></el-step>
          <el-step title="平台复检"></el-step>
          <el-step title="安享质保"></el-step>
        </el-steps>

        <el-steps align-center :active="5" style="margin-top: 40px">
          <el-step title="平台回收"></el-step>
          <el-step title="一键预约卖车"></el-step>
          <el-step title="平台复检"></el-step>
          <el-step title="安享质保"></el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import { getZiyin, getHaohua, getLian, getSuv } from '@/api/cart'
export default {
  name: 'HomeIndex',
  data() {
    return {
      lic:true,
      newData: []
    }
  },
  created() {
    this.getCart('自营')
  },
  methods: {
    async getCart(cart) {
      if (cart == '自营') {
        const res = await getZiyin()
        this.newData = res.data.data.map(item => {
          item.car.typeCode = 1
          item.car.photo = item.car.photo.split('#')
          return item
        })
      }
      if (cart == '豪华') {
        const res = await getHaohua()
        this.newData = res.data.data.map(item => {
          item.car.typeCode = 2
          item.car.photo = item.car.photo.split('#')
          return item
        })
      }
      if (cart == '练手') {
        const res = await getLian()
        this.newData = res.data.data.map(item => {
          item.car.typeCode = 2
          item.car.photo = item.car.photo.split('#')
          return item
        })
      }
      if (cart == 'suv') {
        const res = await getSuv()
        this.newData = res.data.data.map(item => {
          item.car.typeCode = 2
          item.car.photo = item.car.photo.split('#')
          return item
        })
      }
    }
  },
  filters: {
    data: value => {
      return new Date(value).getFullYear()
    }
  }
}
</script>

<style scoped lang="less">
.lic{
  background: #fff;
  padding: 40px 0 20px 0;
}
.grid-content {
  padding-left: 200px;
}
.box-card {
  margin: 0;
}
.home-entry {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
}
.proceedings {
  .heard {
    display: flex;
  }
  .button {
    margin: 15px;
  }
}
.clear {
  clear: both;
}
.router-link-active {
  text-decoration: none;
  color: #666;
}
a {
  text-decoration: none;
  color: #666;
}
.newCart {
  margin-top: 20px;
  .catList {
    background: #fff;
    padding-bottom: 20px;
    padding-top: 10px;
  }
  .h3 {
    margin: 10px;
    font-weight: normal;
    font-size: 40px;
  }
  span {
    margin: 15px;
    font-size: 16px;
    &:hover {
      cursor: pointer;
      background-color: #eee;
    }
  }
}
.goods-list li:nth-child(1) {
  margin-left: 0;
}

.goods-list li:nth-child(4n) {
  margin-left: 0;
}
.goods-list li:nth-child(3n) {
  margin-right: 0;
}
.goods-list {
  float: left;
  padding-left: 0px;
  margin: 0;
  li {
    display: inline-block;
    list-style: none;
    margin: 9px;
    width: 388px;
    img {
      width: 348px;
      height: 232px;
    }
    p {
      font-size: 18px;
      line-height: 18px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: red;
    }
  }
}
// .brand-list {
//   display: flex;
//   li {
//     flex: 1;
//     padding: 10px;
//   }
// }
</style>
